<template>
	<view class="tabs">
		<view class="tab" @click="bindCheck('')">
			<text :class="tabIndex==''&&'active'">全部</text>
			<text class="line" v-if="tabIndex==''"></text>
			<text class="line unline" v-else></text>
		</view>
		<view class="tab" @click="bindCheck('progressing')">
			<text :class="tabIndex=='progressing'&&'active'">持仓中</text>
			<text class="line" v-if="tabIndex=='progressing'"></text>
			<text class="line unline" v-else></text>
		</view>
		<view class="tab" @click="bindCheck('end')">
			<text :class="tabIndex=='end'&&'active'">已结束</text>
			<text class="line" v-if="tabIndex=='end'"></text>
			<text class="line unline" v-else></text>
		</view>
	</view>
	<view class="list">
		<view class="item" v-for="(item,index) in pageData" :key="index" @click="bindPositionInfo(item)">
			<image src="../../static/product-bg.png" class="product-bg" mode=""></image>
			<view class="item-top">
				<text>{{item.statusText}}</text>
				<text>{{item.createTime	}}</text>
			</view>
			<view class="product">
				<text>{{item.product.name}} {{item.product.lockDays}}天</text>
				<image src="/static/right-blue.png" mode=""></image>
			</view>
			<view class="bottom">
				<text>周期{{item.cycle}}/{{item.product.lockDays}}天</text>
				<view class="">
					<text class="line"></text>
					<text>已收益 {{item.totalAmount}}U</text>
				</view>
			</view>
		</view>
		<image src="../../static/empty.png" mode="widthFix" style="width: 348rpx;display: block;margin:400rpx auto;" v-if="emptyState"></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		userProductList
	} from '@/util/api.js'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	const pageDAO = ref({
		"pageNum": 1,
		"pageSize": 10,
		"status": ""
	})
	const emptyState = ref(false)
	const pageData = ref()
	const tabIndex = ref('')
	onShow(() => {
		getData()
	})
	const bindCheck = (index) => {
		tabIndex.value = index
		pageDAO.value.status = index
		pageDAO.value.pageNum = 1
		getData()
	}
	const bindPositionInfo = (item) => {
		uni.navigateTo({
			url: "/pages/positionInfo/positionInfo?id="+item.id
		})
	}
	// 获取数据
	const getData = async () => {
		const result = await userProductList(pageDAO.value)
		
		result.data.records.map(item=>{
			if(item.status == "progressing"){
				item.statusText = "持仓中"
			}
			if(item.status == "end"){
				item.statusText = "已结束"
			}
		})
		if(pageDAO.value.pageNum==1){
			if(result.data.records.length==0){
				emptyState.value = true
			}else{
				emptyState.value = false
			}
			pageData.value = result.data.records
			
		}else{
			pageData.value = pageData.value.concat(result.data.records)
		}
		
	}
	onReachBottom(()=>{
		pageDAO.value.pageNum++
		getData()
	})
</script>

<style lang="scss">
	.list {
		margin: 0 38rpx;
		
		.item {
			padding: 38rpx;
			// background: linear-gradient(120deg, #E8F1FF 0%, #FFFFFF 100%);
			box-shadow: 0px 15rpx 38rpx 2rpx rgba(49, 54, 70, 0.05);
			border-radius: 23rpx;
			margin-bottom: 38rpx;
			position: relative;
			.product-bg{
				position: absolute !important;
				width: 675rpx;
				height: 260rpx;
				left: 0;
				top: 0;
				
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				text {
					color: #333;
					font-size: 28rpx;
					font-weight: 800;
				}

				view {
					display: flex;
					align-items: center;

					.line {
						background: #333;
						display: block;
						width: 3rpx;
						height: 28rpx;
						margin-right: 38rpx;
					}
				}
			}

			.product {
				display: flex;
				align-items: center;
				position: relative;
				margin: 38rpx 0;

				text {
					display: block;
					color: #0265FF;
					font-size: 30rpx;
					font-weight: 800;
					margin-right: 20rpx;
				}

				image {
					display: block;
					width: 24rpx;
					height: 24rpx;

				}
			}

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				text {
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx;

		.tab {

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			text {
				font-size: 30rpx;
				color: #333;
				display: block;
				text-align: center;
				width: 223rpx;
			}

			.active {
				color: #0265FF;
				font-weight: 800;
			}

			.line {
				width: 223rpx;
				height: 8rpx;
				background: #0265FF;
				display: block;
				margin-top: 10rpx;
			}

			.unline {
				background: transparent;
			}

		}

	}

	page {
		background: #F6F7F9;
	}
</style>